<!-- 游戏编辑弹窗 -->
<template>
  <el-dialog
    :title="'计费点管理'"
    :visible="visible"
    width="1200px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row :gutter="15">
        <el-col :lg="2" :md="4">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            style="margin-bottom: 5px;"
            @click="openPointEdit()"
            >添加
          </el-button>
        </el-col>
        <el-col :lg="2" :md="4">
          <el-upload
            accept=".xls,.xlsx"
            class="upload-demo"
            :action="uploadImgUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="successUpload"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :headers="myHeaders"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button
              icon="el-icon-upload2"
              class="ele-btn-icon"
              size="small"
              v-if="permission.includes('sys:game:import')"
            >
              导入
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="2" :md="4">
          <el-button
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            size="small"
            @click="templateImport()"
          >
            下载导入模板
          </el-button>
        </el-col>
      </el-row>
      <!-- <el-form-item label="区别版本" prop="sdk_version"> -->
      <!-- <el-input-number
          :min="0"
          v-model="form.sdk_version"
          placeholder="请输入区别版本   1安卓 2苹果"
          controls-position="right"
          class="ele-fluid ele-text-left"
        /> -->
      <!-- <el-radio-group :disabled="isUpdate" v-model="form.sdk_version">
          <el-radio :label="1">安卓</el-radio>
          <el-radio :label="2">苹果</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <!-- <el-form-item label="游戏appid:" prop="game_appid">
        <el-input
          v-model="form.game_appid"
          placeholder="请输入游戏appid"
          clearable
        />
      </el-form-item> -->

      <!-- <el-form-item
        v-if="form.channel_id !== 0"
        label="游戏支付通知地址:"
        prop="pay_notify_url"
      >
        <el-input
          v-model="form.pay_notify_url"
          placeholder="请输入游戏支付通知地址"
          clearable
        />
      </el-form-item>

      <el-form-item label="访问秘钥:" prop="access_key">
        <el-input
          v-model="form.access_key"
          placeholder="请输入访问秘钥"
          clearable
        />
      </el-form-item>

      <el-form-item label="状态::" prop="status"> -->
      <!-- <el-input-number
          :min="0"
          v-model="form.status"
          placeholder="请输入状态:1=启用 0=禁用"
          controls-position="right"
          class="ele-fluid ele-text-left"
        /> -->
      <!-- <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :selection.sync="selection"
      :loading="loading"
      height="calc(100vh - 500px)"
    >
      <!-- 表头工具栏 -->
      <!-- <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit(null)"
            v-if="permission.includes('sys:game:add')"
            >添加
          </el-button> -->
      <!-- <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
            v-if="permission.includes('sys:game:dall')"
            >删除
          </el-button> -->
      <!-- </template> -->
      <!-- 操作列 -->
      <!-- <template slot="action" slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="openEdit(row)"
            v-if="permission.includes('sys:game:edit')"
            >修改
          </el-link>
          <el-link
            type="primary"
            v-if="row.id == row.relation_game_id"
            :underline="false"
            @click="addgame(row)"
            >关联新增
          </el-link> -->
      <!-- <el-popconfirm
            class="ele-action"
            title="确定要删除此游戏吗？"
            @confirm="remove(row)"
          >
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              v-if="permission.includes('sys:game:delete')"
              >删除
            </el-link>
          </el-popconfirm> -->
      <!-- </template> -->
      <template slot="action" slot-scope="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openPointEdit(row)"
          >编辑
        </el-link>
      </template>
      <!-- <template slot="action" slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEditGameChargePoint(row)"
            v-if="permission.includes('sys:app:edit')"
            >修改
          </el-link>
        </template> -->
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <GamePointEdit
      :data="current"
      :visible.sync="showPointEdit"
      :gameID.sync="gameID"
      @done="reload"
    />
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import GamePointEdit from './game-PointEdit'
import setting from '@/config/setting'

export default {
  name: 'GameChargePoint',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    gameID: {
      type: [Number, String]
    }
  },
  components: { GamePointEdit },
  computed: {
    ...mapGetters(['permission'])
  },
  data() {
    let token = setting.takeToken()
    return {
      // 表单数据
      form: Object.assign({ status: 1 }, this.data),
      where: {},
      // 表单验证规则
      rules: {
        app_id: [
          { required: true, message: '请输入关联项目', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请输入推广渠道', trigger: 'blur' }
        ],
        game_name: [
          { required: true, message: '请输入游戏名称', trigger: 'blur' }
        ],
        icon: [{ required: true, message: '请输入icon', trigger: 'blur' }],
        sdk_version: [
          {
            required: true,
            message: '请输入区别版本',
            trigger: 'blur'
          }
        ],
        game_appid: [
          { required: true, message: '请输入游戏appid', trigger: 'blur' }
        ],
        relation_game_id: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        relation_game_name: [
          { required: true, message: '请输入游戏名称', trigger: 'blur' }
        ],
        pay_notify_url: [
          { required: true, message: '请输入游戏支付通知地址', trigger: 'blur' }
        ],
        access_key: [
          { required: true, message: '请输入访问秘钥', trigger: 'blur' }
        ],
        status: [
          {
            required: true,
            message: '请输入状态',
            trigger: 'blur'
          }
        ]
      },
      // 是否显示编辑弹窗
      showPointEdit: false,
      url: '/Product/index',
      selection: [],
      current: '',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'product_id',
          label: '计费点',
          width: 150,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'alias',
          label: '计费点别名',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center'
        },

        {
          prop: 'channel_name',
          label: '渠道名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center'
        },
        {
          prop: 'price',
          label: '金额rmb',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: 'right'
        }
      ],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 导入
      fileList: [],
      uploadImgUrl: process.env.VUE_APP_API_BASE_URL + '/upload/uploadFile',
      myHeaders: { Authorization: token }
    }
  },
  watch: {
    // gameID() {
    //   console.log(this, "ttttthis");
    //   console.log(this.reload, "ttttthisLOAD");
    //   this.reload();
    // },
    'form.channel_id'(val) {
      if (val === 0) {
        this.$delete(this.form, 'pay_notify_url')
      } else {
        this.$set(this.form, 'pay_notify_url', '')
      }
    },
    visible(val) {
      if (val) {
        this.$set(this.where, 'game_id', this.gameID)
        this.reload()
        // console.log(this.data,"DDD");
        if (this.data) {
          this.form = Object.assign({}, this.data)
          this.isUpdate = true
        } else {
          this.form = {}
          this.isUpdate = false
        }
      }
    }
  },
  methods: {
    /* 保存编辑 */
    // changeAppid(val) {
    //   this.$set(this.form, 'app_id', val)
    //   console.log(this.form)
    // },
    /* 刷新表格 */
    reload() {
      this.$refs.table ? this.$refs.table.reload({ where: this.where }) : ''
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http
            .post('/game/edit', this.form)
            .then((res) => {
              this.loading = false
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                if (!this.isUpdate) {
                  this.form = {}
                }
                this.updateVisible(false)
                this.$emit('done')
                this.reload()
              } else {
                this.$message.error(res.data.msg)
                this.reload()
              }
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
              this.reload()
            })
        } else {
          return false
        }
      })
    },
    /* 显示编辑 */
    openPointEdit(row) {
      this.current = row
      this.showPointEdit = true
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    },
    // 导入
    handlePreview(file) {
      console.log(file)
    },
    handleRemove() {
      this.fileList = []
    },
    successUpload(response) {
      this.loading=true
      this.$set(this.fileList, this.fileList.length, {
        file_name: response.data.file_name,
        save_name: response.data.save_name,
        file_size: response.data.file_size,
        name: response.data.file_name
      })
      let game_id = this.gameID
      let url = response.data.save_name
      this.$http
        .post('game/import_', { game_id: game_id, url: url })
        .then((res) => {
          this.loading=false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg)
            this.fileList = []
            this.reload()
          } else {
            this.$message.error(res.data.msg)
            this.fileList = []
            this.reload()
          }
        })
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed() {
      this.$message.warning(`当前限制选择 1 个文件`)
    },

    // 导入模板
    templateImport() {
      window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/product_template.xls`
    }
  }
}
</script>

<style scoped></style>
